<template>
  <div class="box">
    <myHeader :cartIconShow="true">商品列表</myHeader>
    <div class="nav">
      <div class="nav_show">
        <div class="nav_list " :class="{'select':style=='all'}" @click="change('all')" >推荐 </div>
        <div class="nav_list" :class="{'select':style=='mu'}" @click="change('mu')">母婴 </div>
        <div class="nav_list" :class="{'select':style=='xie'}" @click="change('xie')">鞋包饰品 </div>
        <div class="nav_list" :class="{'select':style=='shi'}" @click="change('shi')">食品 </div>
        <div class="nav_list" :class="{'select':style=='shu'}" @click="change('shu')">数码家电 </div>
        <div class="nav_list" :class="{'select':style=='jia'}" @click="change('jia')">居家百货 </div>
      </div>
    </div>
    <div class="title">
      <p @click="pai('all')">综合排序</p>
      <p @click="pai('buy')">销量优先</p>
      <p @click="pai('qian')">价格</p>
    </div>
    <div class="center">
      <ul>
        <li v-for="(item,index) in showList" :key="index" class="lie">
          
            <i><img :src="item.img" alt=""></i>
            <div class="xiang">
              <p>{{item.title}}</p>
              <b>￥{{item.money}}</b>
              <span>{{item.people}}人付款购买</span>
            </div>
            <div class="anniu">
              <button @click="add(item,'push')">+</button>
            </div>
          
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "../components/header/index.vue"
export default {
  name: 'Home',
  data(){
    return{
      style:'all'
    }
  },
  computed:{
    showList(){
       return this.$store.state.showList
    }
  },
  components: {
    myHeader
  },
  methods:{
    change(value){
      this.$store.commit('SET_SHOWLIST',{
        type:value
      })
      this.style=value
    },
    add(item,type){
      this.$store.commit('SET_CARTLIST',{
        img:item.img,
        title:item.title,
        money:item.money,
        num:1,
        cun:5,
        type
      })
      
    },
    pai(type){
      this.$store.commit('get_showlist',{
        type
      })
    }
  },
  mounted(){
    this.$store.commit('SET_SHOWLIST',{
      type:"all"
    })
  }

}
</script>
<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
.box{
  width: 100%;
  height: auto;
}   

    .nav{
      width: 3.75rem;
      height: 0.7rem;
      background-color: rgb(93, 66, 133);
      overflow: hidden;overflow-x: scroll;
      margin-top: 0.45rem;
      .nav_show{
        width: 5rem;
        height: auto;
        display: flex;
      color: white;
      align-items: center;
      font-size: 0.16rem;
      justify-content:space-between;
        
      }
      .nav_list{
        height: 0.7rem;
        line-height: 0.7rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
      }
      .select{
        
        background-color: rgb(154, 81, 255);
      }
    }
    .title{
      width: 100%;
      height: 0.4rem;
      font-size: 0.16rem;
      display: flex;

      p{
        width: 30%;
        height: 100%;
        color: black;
        text-align: center;
        line-height: 0.4rem;
      }
    }
    .center{
      width: 100%;
      height: auto;
      margin-top: 0.2rem;
      ul{
        width: 100%;
        height: auto;
      .lie{
        width: 100%;
        height: 0.77rem;
        display: flex;
        background: #fff;
        margin-bottom: 0.2rem;
        i{
          width: 0.55rem;
          height: 0.55rem;
          img{
            width: 100%;
            height: 100%;
            float: left;
            left: 0;
            top: 0;
          }
        }
        .xiang{
          width: 2.21rem;
          height: 0.77rem;
          display: flex;
          flex-wrap: wrap;
          p{
            width: 2.21rem;
            height: 0.38rem;
            font-size: 0.14rem;
            text-align: left;
          }
          b{
            width: 2.21rem;
            height: 0.14rem;
            font-size: 0.14rem;
            margin-top: 0.1rem;
            text-align: left;
            font-weight: 800;
            color: rgb(93, 66, 133);
          }
          span{
            width: 2.21rem;
            height: 0.16rem;
            font-size: 0.12rem;
            text-align: left;
          }
          
        }
        .anniu{
          width: 0.55rem;
          height: 0.77rem;
          display: flex;
          align-items: flex-end;
          button{
            width: 0.32rem;
            height: 0.22rem;
            background-color: rgb(93, 66, 133);
            color: white;
          }
        }
      }
      }
    }
</style>
